<template>
  <div class="main">
    <div class="container container-header">
      <div class="container-item">
        <h1>{{ user.user_name }}({{ user.real_name }})</h1>
        <p class="welcome">
          {{
            user.user_type === "1"
              ? "学校管理员"
              : user.user_type === "2"
              ? "项目申报用户"
              : "专家用户中心"
          }}
        </p>
        <p class="prompt">
          您近期还有<span>{{ homeData.check_count }}</span
          >个项目评审任务需要完成
        </p>
        <div class="column">
          <div class="item">
            <img src="@/assets/images/all-project.png" alt="" />
            <p @click="allProject">全部项目（{{ homeData.total_count }}）</p>
          </div>
          <div class="item">
            <img src="@/assets/images/review-project.png" alt="" />
            <p @click="reviewProject">
              待审核项目（{{ homeData.check_count }}）
            </p>
          </div>
          <div class="item">
            <img src="@/assets/images/has-project.png" alt="" />
            <p @click="hasProject">
              已评审项目（{{ homeData.already_count }}）
            </p>
          </div>
        </div>
      </div>
      <div class="illustrations">
        <img src="@/assets/images/illustrations1.png" alt="" />
      </div>
    </div>
    <div class="container2">
      <div>
        <div class="middle-item">
          <div class="item-title">
            <p class="l">
              <i class="iconfont icon-xiaoxitongzhi"></i>通知（{{
                noticelist.list != null ? noticelist.list.length : 0
              }}条新消息）
            </p>
            <router-link to="/tongzhi" class="r"
              >更多 More<i class="iconfont icon-gengduo"></i
            ></router-link>
          </div>
          <div class="listAll">
            <div v-if="noticelist.list === ''" class="item-list zanwu">
              暂无通知
            </div>
            <div
              class="item-list"
              v-for="(item, index) in noticelist.list"
              :key="index"
              v-else
            >
              <div>
                <div class="list-img">
                  <img src="@/assets/images/touxiang.png" alt="" />
                </div>
                <div class="list-text">
                  <p>{{ item.title }}</p>
                  <p class="text-info">
                    <i class="iconfont icon-yonghu"></i>
                    <span>管理员</span>
                    <span>{{ item.add_time | formatTime }}</span>
                  </p>
                </div>
                <div class="list-btn">
                  <p @click="NoticeDetailsPage(item.notice_id)">
                    <i class="iconfont icon-qianwang"></i>查看
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="container-echarts">
          <div class="item-title">
            <p><i class="iconfont icon-tongji1"></i>本年度项目处理量</p>
            <div>
              <div>
                每月指标
                <p class="month"></p>
              </div>
              <div>
                完成指标
                <p class="complete"></p>
              </div>
              <el-select
                class="niandu-select"
                v-model="selectedNianDu"
                placeholder="请选择"
                @change="handleNianDuChange"
              >
                <el-option
                  v-for="item in NianDuList"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="bar">
            <v-chart
              :options="nianDuChuLiOptions"
              :init-options="initOptions"
              autoresize
            />
          </div>
        </div>
      </div>
      <div class="middle-item policy-middle-item">
        <div class="item-title">
          <p class="l">
            <i class="iconfont icon-xiaoxitongzhi"></i>政策公告/文章列表（{{
              articlelist.list != null ? articlelist.list.length : 0
            }}条新消息）
          </p>
          <router-link to="/policylist" class="r"
            >更多 More<i class="iconfont icon-gengduo"></i
          ></router-link>
        </div>
        <div class="listAll">
          <div
            class="item-list"
            v-for="(item, index) in articlelist.list"
            :key="index"
          >
            <div>
              <div class="policy-list-img">
                <img src="@/assets/images/policy.png" alt="" />
              </div>
              <div class="list-text">
                <p>{{ item.title }}</p>
                <p class="text-info">
                  <i class="iconfont icon-yonghu"></i>
                  <span>管理员</span>
                  <span>{{ item.add_time | formatTime }}</span>
                </p>
              </div>
              <div class="list-btn">
                <p @click="DetailsPage(item.a_id)">
                  <i class="iconfont icon-qianwang"></i>查看
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import moment from "moment";

import { SchoolIndex, UserInfo, SchoolEchart } from "@/api/login";
// 年度处理情况
import nianDuChuLiOptions from "./data/nianDuChuLiOptions.js";

import Nav from "@/components/Nav";
export default {
  name: "home",
  data() {
    return {
      nianDuChuLiOptions,
      initOptions: {
        renderer: "svg",
      },
      Showbg: true,
      user: "",
      type: "",
      token: "",
      homeData: "",
      noticelist: "",
      articlelist: "",
      NianDuList: ["上半年", "下半年"],
      selectedNianDu: "上半年",
    };
  },
  components: {
    Nav,
  },
  filters: {
    formatTime(time) {
      return moment(time * 1000).format("YYYY-MM-DD");
    },
  },
  methods: {
    // 通知详情页
    NoticeDetailsPage(noticeid) {
      this.$router.push({
        path: "/list-details",
        query: {
          notice_id: noticeid,
        },
      });
    },
    // 政策详情页
    DetailsPage(aid) {
      this.$router.push({
        path: "/details",
        query: {
          a_id: aid,
        },
      });
    },
    // 点击全部项目
    allProject() {
      (this.type = "1"),
        this.$router.push({
          path: "/school-shenbao",
          query: {
            type: this.type,
          },
        });
    },
    reviewProject() {
      (this.type = "2"),
        this.$router.push({
          path: "/school-shenbao",
          query: {
            type: this.type,
          },
        });
    },
    hasProject() {
      (this.type = "3"),
        this.$router.push({
          path: "/school-shenbao",
          query: {
            type: this.type,
          },
        });
    },
    querySchoolIndex() {
      SchoolIndex({
        token: this.token,
      }).then((result) => {
        const { data } = result;
        const { notice_list, article_list } = data;
        this.noticelist = notice_list;
        this.articlelist = article_list;
        this.homeData = data;
        if (result.msg === "数据不存在") {
          this.$router.push({
            path: "/dataError",
          });
        }
        if (result.code === -1) {
          this.$router.push({
            path: "/rootError",
          });
        }
      });
    },
    // 当选择框发生变化
    handleNianDuChange(value) {
      // console.log(value);
      this.querySchoolEchart(value);
    },
    querySchoolEchart(value) {
      SchoolEchart({
        token: this.token,
      }).then((result) => {
        const { data } = result;
        const xAxisData = [];
        const completeData = [];
        const monthData = [];
        if (value === "下半年") {
          for (let index = 6; index < 12; index++) {
            xAxisData.push(data.datax[index]);
            completeData.push(data.dataycheck[index]);
            monthData.push(data.dataynocheck[index]);
          }
        } else {
          for (let index = 0; index < 6; index++) {
            xAxisData.push(data.datax[index]);
            completeData.push(data.dataycheck[index]);
            monthData.push(data.dataynocheck[index]);
          }
        }
        this.$set(nianDuChuLiOptions.xAxis[0], "data", xAxisData);
        this.$set(nianDuChuLiOptions.series[0], "data", completeData);
        this.$set(nianDuChuLiOptions.series[1], "data", monthData);
      });
    },
    // 获取用户信息
    queryUserInfo() {
      UserInfo({
        token: this.token,
      }).then((result) => {
        const { data } = result;
        this.user = data;
      });
    },
    backgroundShow() {
      this.$emit("backgroundShow", this.Showbg);
    },
  },
  created() {
    this.backgroundShow();
  },
  mounted() {
    const token = sessionStorage.getItem("token");
    this.token = token;
    this.querySchoolIndex();
    this.queryUserInfo();
    this.querySchoolEchart();
  },
};
</script>
<style>
/**
 * 默认尺寸为 600px×400px，如果想让图表响应尺寸变化，可以像下面这样
 * 把尺寸设为百分比值（同时请记得为容器设置尺寸）。
 */
img {
  width: 100%;
  height: 100%;
}
.echarts {
  width: 100%;
  height: 100%;
}
</style>
<style lang='scss' scoped>
.main {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding: 0;
  color: #242748;
  margin: 0 auto;
  position: relative;
  font-size: 18px;
  margin: 40px 50px 20px 30px;
  text-align: left;
  font-family: "PingFang";
  .container {
    width: 100%;
    height: 245px;
    margin: 30px 0;
  }
  .container2 {
    margin: 30px 0;
    display: flex;
    justify-content: space-between;
    & > div {
      width: 49%;
      &:first-child {
        display: flex;
        flex-direction: column;
      }
    }
    .middle-item {
      background-color: #fff;
      box-shadow: 0px 9px 22.56px 1.44px rgba(172, 182, 236, 0.07);
      border-radius: 10px;
      padding: 20px 25px 0;
    }
    .container-echarts {
      height: 330px !important;
      margin-top: 20px;
      background-color: #fff;
      padding: 20px 35px 15px 30px;
      background: -moz-linear-gradient(
        to right,
        #fffffe 0%,
        #fffdf5 25%,
        rgb(255, 248, 226) 75%,
        rgb(255, 248, 226) 100%
      );
      background: -webkit-linear-gradient(
        to right,
        #fffffe 0%,
        #fffdf5 25%,
        rgb(255, 248, 226) 75%,
        rgb(255, 248, 226) 100%
      );
      background: -ms-linear-gradient(
        to right,
        #fffffe 0%,
        #fffdf5 25%,
        rgb(255, 248, 226) 75%,
        rgb(255, 248, 226) 100%
      );
      background: linear-gradient(
        to right,
        #fffffe 0%,
        #fffdf5 25%,
        rgb(255, 248, 226) 75%,
        rgb(255, 248, 226) 100%
      );
      box-shadow: 0px 9px 22.56px 1.44px rgba(172, 182, 236, 0.07);
      .item-title {
        overflow: hidden;
        display: flex;
        justify-content: space-between;
        align-items: center;
        a {
          font-size: 16px;
          i {
            margin-left: 10px;
            color: #9fa4b4;
          }
        }
        i {
          color: #9fa4b4;
          margin-right: 10px;
        }
        & > div {
          display: flex;
          & > div {
            display: flex;
            align-items: center;
            font-size: 12px;
            color: #2b3139;
            font-weight: 700;
            p {
              width: 30px;
              height: 10px;
              border-radius: 10px;
              margin-left: 10px;
              margin-right: 15px;
            }
            .month {
              background-color: #fec55e;
            }
            .complete {
              background-color: #5adcca;
            }
          }
        }
        .niandu-select {
          position: relative;
          width: 80px;
          height: 25px;
          line-height: 25px;
          margin-left: 35px;
        }
        /deep/.el-input__inner {
          height: 25px;
          line-height: 25px;
          padding-left: 10px;
          padding-right: 20px;
        }
        /deep/.el-select .el-input__inner:focus {
          border-color: #ccc;
        }
        /deep/.el-select .el-input.is-focus .el-input__inner {
          border-color: #ccc;
        }
        /deep/.el-input__icon {
          height: auto;
          line-height: 0;
          width: 20px;
        }
      }
      .bar {
        height: calc(100% - 20px);
      }
    }
  }
  .container-header {
    position: relative;
    padding: 25px 50px;
    border-radius: 10px;
    margin-top: 50px;
    font-family: "PingFang";
    box-shadow: 0px 9px 22.56px 1.44px rgba(172, 182, 236, 0.07);
    background: -moz-linear-gradient(
      left,
      rgb(255, 255, 255) 15%,
      rgb(241, 246, 255) 50%,
      rgb(229, 238, 254) 100%
    );
    background: -webkit-linear-gradient(
      left,
      rgb(255, 255, 255) 15%,
      rgb(241, 246, 255) 50%,
      rgb(229, 238, 254) 100%
    );
    background: -ms-linear-gradient(
      left,
      rgb(255, 255, 255) 15%,
      rgb(241, 246, 255) 50%,
      rgb(229, 238, 254) 100%
    );
    .container-item {
      line-height: 50px;
      h1 {
        line-height: 60px;
        font-size: 48px;
        color: #2b3139;
      }
      .welcome {
        color: #9599a4;
      }
      .prompt {
        span {
          color: #5673ff;
        }
      }
      .column {
        display: flex;
        .item {
          display: flex;
          align-items: center;
          padding-right: 20px;
          img {
            width: 15px;
            height: 15px;
            margin-right: 15px;
          }
          p {
            cursor: pointer;
          }
        }
      }
    }
    .illustrations {
      width: 760px;
      height: 275px;
      position: absolute;
      top: -25px;
      right: 70px;
      z-index: 99;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .container2 {
    .listAll {
      margin-top: 20px;
      & > div:last-child {
        border-bottom: none;
      }
      .item-list {
        display: flex;
        padding: 15px 5px;
        border-bottom: solid 2px #e8e9ef;
        & > div {
          flex: 1;
          height: auto;
          position: relative;
          display: flex;
          align-items: center;
          cursor: pointer;
        }
        .list-img {
          width: 65px;
          height: 65px;
          img {
            border-radius: 50%;
          }
        }
        .policy-list-item {
          width: 100px;
          height: auto;
        }
        .list-text {
          width: 485px;
          margin: 0 50px 0 30px;
          line-height: 40px;
          p {
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .text-info {
            font-size: 16px;
          }
        }
        .list-btn {
          position: absolute;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
          display: flex;
          justify-content: space-between;
          cursor: pointer;
          p {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #a1a4b5;
            font-size: 12px;
            i {
              font-size: 22px;
              margin-bottom: 5px;
            }
          }
        }
      }
    }
    .text-info {
      color: #9599a4;
      & > span:nth-child(2) {
        margin: 0 20px 0 10px;
      }
      i {
        color: #5673ff;
      }
    }
  }
  .zanwu {
    font-size: 14px;
    color: #ccc;
  }
  /deep/.icon-xiaoxitongzhi {
    color: #9fa4b4;
    font-size: 18px;
    margin-right: 10px;
  }
}
</style>